import React,{useState,useEffect} from 'react';
import { Modal,Tree, Empty, Tag } from 'antd';
const { TreeNode } = Tree;
const renderTreeNodes = data =>
  data.map((item,index) => {
    if (item.children) {
      return (
        <TreeNode title={item.text} key={`${item.id}`} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
  return <TreeNode key={item.id} title={item.text} {...item} dataRef={item}/>;
});
const RoleForm = props => {
  const { modalVisible, onCancel,onOk,menuList, checkedKeys,handleCheckedKeys} = props;

  /**
   *勾选中
   * @param {*} checked 
   */
  const onCheck = ({checked}) =>{
    handleCheckedKeys(checked)
  }
  return (
    <Modal
      destroyOnClose
      title="授权"
      visible={modalVisible}
      onCancel={() => onCancel()}
      onOk={()=>onOk(checkedKeys)}
    >

      {
          menuList&&menuList.length>0?<Tree
          checkable
          autoExpandParent
          checkStrictly
          checkedKeys={checkedKeys}
          onCheck={onCheck}
          >
            {
              renderTreeNodes(menuList)
            }
        </Tree>
        :
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      }
     
    </Modal>
  );
};

export default RoleForm;
